<template>
<div class="app-container">
  <div>
    <Jzcharts/>
  </div>
  <div class="mg_top">
    <JyTopHeader/>
  </div>
<!--  今日饮水量-->
  <div class="mg_top bj">
    <div style="width: 55%;margin-right: 2%">
      <Yscharts/>
    </div>

    <div style="width: 49%;margin-right: 2%">
     <twcharts/>
    </div>

    <div style="width: 49%;margin-right: 2%">
     <bscharts/>
    </div>

    <div style="width: 49%;margin-right: 2%">
     <xlcharts/>
    </div>

    
  </div>

  <div>
    <div style="width: 49%;margin-right: 2%">
     <MapContainer/>
    </div>
  </div>



</div>
</template>


<script>
import JyTopHeader from "@/views/HomeAndTeacher/components/JyTopHeader.vue";
import Yscharts from "@/views/HomeAndTeacher/charts/yscharts.vue";
import Twcharts from "@/views/HomeAndTeacher/charts/twcharts.vue";
import Jzcharts from "@/views/HomeAndTeacher/charts/jzcharts.vue";
import bscharts from "@/views/HomeAndTeacher/charts/bscharts.vue";
import xlcharts from "@/views/HomeAndTeacher/charts/xlcharts.vue";
import MapContainer from "./gps/MapContainer.vue";
export default {
  name: "JyIndex",
  components:{
    JyTopHeader,
    Yscharts,
    Twcharts,
    Jzcharts,
    bscharts,
    xlcharts,
    MapContainer
  },
  data(){
    return{
      name:"ddd"
    }
  }
}
</script>



<style scoped lang="scss">
.mg_top{
  margin-top: 5px;
}
.bj{
  display: flex;
  justify-content: center;
}
</style>
